<template>
	<view>
		<image class="logo ww100" src="@/static/image/fashi.jpg" mode="aspectFill"></image>
		<view class="content p20">
			<view class="item mb40">
				<view class="f32">类型</view>
				<picker class="mt20" mode="selector" :value="tIndex" :range="type" @change="setAct('tIndex', $event)">
					<view class="d-b-c pickerView">
						<view class="" v-if="tIndex > -1">{{ type[tIndex] }}</view>
						<view class="gray9" v-else>请选择类型</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">个人照片</view>
				<view class="mt20 d-s-c">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="1"></u-upload>
					<view class="redEe f26 pr80 ml60">说明：照片须为本人一寸证件照（25mmX35mm）且照片格式只能为：png,jpg,jepg格式，照片大小在200kb内。
					</view>
				</view>
			</view>
			<view class="item mb40">
				<view class="f32">俗家姓名</view>
				<input class="mt20" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="item mb40">
				<view class="f32">身份证号</view>
				<input class="mt20" type="idcard" v-model="card" placeholder="请输入身份证号" />
			</view>
			<view class="item mb40">
				<view class="f32">文化程度</view>
				<picker class="mt20" mode="selector" :value="cIndex" :range="culture"
					@change="setAct('cIndex', $event)">
					<view class="d-b-c pickerView">
						<view class="" v-if="cIndex > -1">{{ culture[cIndex] }}</view>
						<view class="gray9" v-else>请选择文化程度</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">出生日期</view>
				<picker class="picker mt20" mode="date" @change="setAct('date',$event)">
					<view class="d-b-c pickerView">
						<view class="" v-if="date">{{ date }}</view>
						<view class="gray9" v-else>请选择出生日期</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">联系电话</view>
				<input class="mt20" type="tel" v-model="phone" :maxlength="11" placeholder="请输入联系电话" />
			</view>
			<view class="item mb40">
				<view class="f32">性别</view>
				<picker class="mt20" mode="selector" :range="gender" :value="gIndex" @change="setAct('gIndex', $event)">
					<view class="d-b-c pickerView">
						<view class="" v-if="gIndex > -1">{{ gender[gIndex] }}</view>
						<view class="gray9" v-else>请选择性别</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">师承关系</view>
				<picker class="mt20" mode="selector" :range="master" :value="mIndex" @change="setAct('mIndex', $event)">
					<view class="d-b-c pickerView">
						<view class="" v-if="mIndex > -1">{{ master[mIndex] }}</view>
						<view class="gray9" v-else>请选择师承关系</view>
						<u-icon name="arrow-down" color="#333" size="15"></u-icon>
					</view>
				</picker>
			</view>
			<view class="item mb40">
				<view class="f32">籍贯</view>
				<input class="mt20" v-model="city" type="text" placeholder="请输入籍贯" />
			</view>
			<view class="item mb40">
				<view class="f32">住址</view>
				<input class="mt20" v-model="address" type="text" placeholder="请输入住址" />
			</view>
			<view class="redEe f28 mb40 fb">工本费：100元</view>
			<!-- <u-datetime-picker @cancel="show = false" :show="show" :value="date" mode="datetime" @confirm="setDate"></u-datetime-picker> -->
			<u-button text="提交信息" shape="circle" color="#DA2424" @click="send"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //选择日期
				type: [], //类型
				tIndex: -1, //类型下标
				fileList: [], //个人照片
				name: '', //俗名
				card: '', //身份证号
				culture: ['小学', '初中', '中专', '高中', '大专', '本科'], //文化程度
				cIndex: -1, //文化程度下标
				date: '', //出生日期
				phone: '', //电话
				gender: ['男', '女'], //性别
				gIndex: -1, //性别下表
				city: '', //籍贯
				address: '', //住址
				master: [], //师傅
				mIndex: -1
			};
		},
		onLoad() {
			this.setInit()
		},
		methods: {
			setInit() {
				const init = uni.getStorageSync('init')
				const types = JSON.parse(init.types)
				const master = JSON.parse(init.master)
				this.type = Object.keys(types).map(key => types[key]);
				this.master = Object.keys(master).map(key => master[key]);
			},
			async send() {
				if (this.tIndex < 0) return uni.showToast({ title: '请选择类型', icon: 'none' });
				if (this.fileList.length == 0) return uni.showToast({ title: '请上传个人照片', icon: 'none' });
				if (this.name == '') return uni.showToast({ title: '请输入俗名', icon: 'none' });
				if (this.card == '') return uni.showToast({ title: '请输入身份证号', icon: 'none' });
				if (this.cIndex < 0) return uni.showToast({ title: '请选择文化程度', icon: 'none' });
				if (this.date == '') return uni.showToast({ title: '请选择出生日期', icon: 'none' });
				if (this.phone == '') return uni.showToast({ title: '请输入联系电话', icon: 'none' });
				if (this.gIndex < 0) return uni.showToast({ title: '请选择性别', icon: 'none' });
				if (this.city == '') return uni.showToast({ title: '请输入籍贯', icon: 'none' });
				if (this.address == '') return uni.showToast({ title: '请输入住址', icon: 'none' });
				const image = (await this.$upload(this.fileList[0].url)).fullurl
				const res = await this.$request({
					url: this.$api.conversion,
					data: {
						type: this.type[this.tIndex], //类型
						image, //个人照片
						name: this.name, //俗名
						card: this.card, //身份证号
						culture: this.culture[this.cIndex], //文化程度
						date: this.date, //出生日期
						tel: this.phone, //联系电话
						gander: this.gender[this.gIndex], //性别
						native_place: this.city, //籍贯
						address: this.address, //住址
						pname: this.master[this.mIndex]
					}
				})
				uni.showToast({ icon: 'none', title: res.msg });
				if (res.code == 0) {
					setTimeout(() => uni.navigateBack(), 1000)
				}
			},
			setAct(name, e) {
				// console.log(name, e.detail);
				this[name] = e.detail.value;
			},
			afterRead(e) {
				this.fileList.push(e.file);
				// console.log(e);
			},
			deletePic() {
				this.fileList = [];
			},
			setDate(e) {
				this.date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd MM:ss');
				this.show = false;
			}
		}
	};
</script>

<style scoped lang="scss">
	::v-deep .u-upload__button {
		margin: 0 !important;
	}

	.logo {
		height: 400rpx;
	}

	.item {

		input,
		picker,
		.picker {
			background-color: #f7f7f7;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.pickerView {
				height: 80rpx;
			}
		}
	}
</style>